<template>
	<a-timeline v-if="operationLogList.length" style="margin-top: 15px">
		<a-timeline-item v-for="(item, index) in operationLogList" :key="index">
			<a-descriptions layout="vertical" bordered size="small">
				<a-descriptions-item :label="item?.opTypename">
					<a-row style="line-height: 30px">
						<a-col :span="12">操作人：{{ item?.opUserInfo }}</a-col>
						<a-col :span="12">操作时间：{{ item?.opTime }}</a-col>
						<a-col v-if="item?.money !== null && item?.money !== ''" :span="24">退定金额：{{ item?.money }}元</a-col>
						<a-col v-if="item?.transferType" :span="24">转移方式：{{ item?.transferType }}</a-col>
						<a-col v-if="item?.remark" :span="24">
							<span v-if="phoneTest.test(item.remark.substring(item.remark.length - 8, item.remark.length))">备注：{{ item?.remark.substring(0, item?.remark.length - 8) }}</span>
							<span v-else>备注：{{ item?.remark }}</span>
						</a-col>
						<a-col v-if="item?.confiscateInfo" :span="24">罚没信息：{{ item?.confiscateInfo }}</a-col>
					</a-row>
				</a-descriptions-item>
			</a-descriptions>
		</a-timeline-item>
	</a-timeline>
	<a-empty v-else class="house-empty" />
</template>
<script setup lang="ts">
	import {onMounted, ref} from 'vue'
	import {operationLog} from '@/api/contract'
	import {phoneTest} from '@/utils/check'

	const props = defineProps<{
		id: string
	}>()

	onMounted(() => {
		getLog()
	})
	const operationLogList = ref<any>([])
	const getLog = () => {
		operationLogList.value = []
		operationLog({
			businessId: props.id,
			current: 1,
			size: 100,
			sort: 'operationTime'
		}).then(({data}) => {
			data.records.forEach((item: any) => {
				if (item.extraInfo) {
					console.log(item)
					if (!item.extraInfo.opTypename) {
						item.extraInfo.opTypename = item.operationType
					}

					operationLogList.value.push(item.extraInfo)
				}
			})
		})
	}
</script>
